<template>
  <div>
    <h1>toRefs</h1>
    <h2>obj中的name</h2>
    <h1>{{obj.name}}</h1>
    <h2>ref变为响应式</h2>
    <h1>{{name1}}</h1>
    <h2>toRef变为响应式</h2>
    <h1>{{name2}}</h1>
    <button @click="changeName">更改name值</button>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,reactive,toRef } from 'vue';

export default defineComponent({
  setup () {
    const obj = reactive({
      name:'tom',
      age:20,
    });
    const name1 = ref(obj.name);
    console.log(name1);

    const name2 = toRef(obj,'name');
    console.log(name2);

    function changeName() {
      name2.value += '222';
    }
    
    

    return {
      obj,
      name1,
      name2,
      changeName,
    }
  }
})
</script>

<style scoped>

</style>
